import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
// import CardStackStyleInterpolator from 'react-navigation/src/views';

// PAGE
import Login from './container/Login';
import User from './container/User';
import Transaction from './container/Transaction';
import Home from './container/Home';
import Setting from './container/Settings';
import Balance from './container/Balance';
import BalanceInfo from './container/BalanceInfo';
import MarketIndex from './container/MarketIndex';
import MarketInfo from './container/MarketInfo';
import ScanCode from './container/ScanCode';
import DepositAndWithdraw from './container/DepositAndWithdraw';
import About from './container/About';
import MarketItems from './components/MarketItems';
import ForgetPassword from './container/ForgetPassword';
import Register from './container/Register';
import Tester from './container/Tester';
import BalanceRecord from './container/BalanceRecord';
import ExchangeBalance from './container/ExchangeBalance';

// import Test from './container/Test';
import Test from './container/Test';
import Test1 from './container/Test1';


// APP的底部导航栏 及其 页面 配置
const MainScreen = createBottomTabNavigator({
        Home: { screen: Home },
        MarketIndex: { screen: MarketIndex },
        Transaction: { screen: Transaction },
        // Transaction: {screen: ExchangeBalance},
        // Balance: { screen: Balance },
        Balance: { screen: ExchangeBalance },
        User: { screen: User },
    },
    {
        tabBarOptions: {
            activeTintColor: '#3A62F0',
            inactiveTintColor: '#C6C6C6',
            showIcon: true,
            labelStyle: {
                fontSize: 12,
                marginTop: 0,
                marginBottom: 0,
            },
            style: {
                backgroundColor: '#FCFCFC',
                paddingBottom: 5
            },
            tabStyle: {
            }
        },
        tabBarPosition: 'bottom',

    });

const TransitionConfiguration = () => ({
    screenInterpolator: (sceneProps) => {
        const {scene} = sceneProps;
        const {route} = scene;
        const params = route.params || {};
        const transition = params.transition || 'forHorizontal';
        // return CardStackStyleInterpolator[transition](sceneProps);
    }
})

const AppNavigator = createStackNavigator({
    // Tab:
    Home: { screen: MainScreen },
    Login: { screen: Login },
    Setting: { screen: Setting },
    MarketInfo: { screen: MarketInfo },
    BalanceInfo: { screen: BalanceInfo },
    ScanCode: { screen: ScanCode },
    DepositAndWithdraw: {screen: DepositAndWithdraw},
    Test1: {screen: Test1},
    Test: {screen: Test},
    About: {screen: About},
    MarketItems: {screen: MarketItems},
    ForgetPassword:{screen:ForgetPassword},
    Register: {screen:Register},
    Tester: {screen:Tester},
    BalanceRecord: {screen: BalanceRecord},
    ExchangeBalance: {screen: Balance},
}, {
        headerMode: 'none', // 不显示顶部导航条
        // transitionConfig: TransitionConfiguration
    });

export default AppNavigator;
